import { useRef, useState } from "react";
import useBusinessMap from "../../../../../common/BusinessMap/useBusinessMap";
import { Button, Space } from "antd";
import { Style } from "ol/style";
import LittleTitle from "../../../../../common/LittleTitle";
import RadiusComponent from "../../../../../common/RadiusComponent";
import DrawComponent from "../../../../../common/DrawComponent";
import { PlayCircleOutlined } from "@ant-design/icons";
import { geomToWkt, navByWkt } from "../../../../../../utils/helper/mapHelper";
import JzzyApi from "../../../../../../utils/apis/JzzyApi";

export default function Jznlfx(props) {
    const ref = useRef();
    const map = useBusinessMap();
    const [loading, setLoading] = useState();
    const [radius, setRadius] = useState();
    const [geom, setGeom] = useState();
    return <Space direction='vertical' Style={{
        width:'100%'
    }}>
    <Space className="w100" direction="vertical">
        <LittleTitle fontsize={16} icon={false}>选择周边距离</LittleTitle>
        <RadiusComponent radius={radius} onChange={value => {
            setRadius(value)
        }} />
    </Space>
    {radius && <Space className="w100" direction="vertical">
        <LittleTitle fontsize={16} icon={false}>绘制图形</LittleTitle>
        <DrawComponent radius={radius *1000} onDrawEnd={geom => {
            setGeom(geom)
        }}/>
        </Space>}
        {geom && <div style={{
            marginTop:16,
            textAlign:"right"
        }}>
            <Button icon={<PlayCircleOutlined />} loading={loading} type="primary" onClick={e => {
                const wkt = geomToWkt(geom);
                navByWkt(wkt, map, true);
                setLoading(true)
                JzzyApi.listByPolygon2(wkt).then((resp) => {
                    props.onComplete?.(resp.data,geom)
                }).finally(e => setLoading(false))
            }}>开始分析</Button>
        </div>}
    </Space>
}